<div ng-hide="loaded">Loading. Please wait...</div>

<div ng-show="loaded">

  <h1 class="projectlistheader">My Projects</h1>

  <table class="table-condensed">

    <thead>
      <tr>
        <th></th>
        <th></th>
        <th>Project</th>
        <th>Description</th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="project in projects | orderBy:'orderby':true" ng-class="{ghost: !project.key}">
        <td class="key">{{project.key}}</div>
        <td><button class="btn btn-small btn-success" ng-class="{disabled: !project.key}" ng-click="select_project(project)"><i class="icon-edit icon-white"></i> Run/Edit</button>
        <td>{{project.name}}</td>
        <td>{{project.description}}</td>
        <td><button class="btn btn-small btn-danger" ng-class="{disabled: !project.key}" ng-click="prompt_to_delete_project(project)"><i class="icon-remove icon-white"></i> delete</button></td>
      </tr>

      <tr class="project" ng-hide="has_projects()">
         <td colspan="5">
           <div>
             <b>No projects created yet.</b>
           </div>
           <div style="color: gray;">
              <div>Use the templates below to start a new project.</div>
             <div ng-hide="config.is_logged_in">
               Or <a ng-click="login()">login</a> to access your saved projects.
             </div>
           </div>
         </td>
      </tr>
    </tbody>

  </table>
  <div ng-repeat="source in templates.template_sources">
    <h1>{{source.description}}</h1>
    <div ng-repeat="template in templates.templates | filter:{source_key: source.key}">
        <div class="template" style="margin: .5em;">
          <button class="btn" style="float: left;" ng-click="new_project(template)"><i class="icon-plus"></i> New Project</button>
          <div stlye="clear: both;">
             <div class="name">{{template.name}}</div>
             <div class="description">{{template.description}}</div>
          </div>
        </div>
    </div>
  <div>

</div>
